<template>
  <!-- 首页 -->
  <view class="conter">
    <view class="box">
      <view class="title">
        <view class="title_word">
          黄色市综合空气质量
          <uni-icons type="arrowdown" size="15" class="icon"></uni-icons>
        </view>
        <view class="title_time">
          更新时间 12:00
        </view>
      </view>
      <view class="contaminated">
        <view class="circular">
          126
        </view>
        <view class="light">
          <view class="light_top">
            轻度污染
          </view>
          <view class="light_bottom">
            首要污染物 &nbsp&nbsp&nbsp PM2.5
          </view>
        </view>
        <view class="contaminated_icon">
          <image src="../../static/home_page/shuye.png" mode=""></image>
        </view>
        <view class="contaminated_right">
          AQI
        </view>
      </view>
    </view>
    <view class="chart" v-if="flag==1">
      <view class="chart_number">
        <view class="chart_frist">
          <view class="temperature">
            <image src="../../static/home_page/wendu.png" mode=""></image>
            <view>
              温度
            </view>
          </view>
          <view class="frist_number">
            19.3℃
          </view>
        </view>
        <view class="chart_border">
        </view>
        <view class="chart_two">
          <view class="humidity">
            <image src="../../static/home_page/shidu.png" mode=""></image>
            <view class="">
              湿度
            </view>
          </view>
          <view class="frist_number">
            44%
          </view>
        </view>
        <view class="chart_border">
        </view>
        <view class="chart_three">
          <view class="wind_speed">
            <image src="../../static/home_page/fensu.png" mode=""></image>
            <view class="">
              风速
            </view>
          </view>
          <view class="frist_number">
            8km/h
          </view>
        </view>
        <view class="chart_border">
        </view>
        <view class="chart_four">
          <view class="wind_direction">
            <image src="../../static/home_page/fengxiang.png" mode=""></image>
            <view class="frist_number_a">
              风向
            </view>
          </view>
          <view class="frist_number">
            西北
          </view>
        </view>
        <view class="chart_border">
        </view>
        <view class="chart_five">
          <view class="pressure">
            <image src="../../static/home_page/qiya.png" mode=""></image>
            <view class="">
              气压
            </view>
          </view>
          <view class="frist_number">
            1023hpa
          </view>
        </view>
      </view>
      <view class="chart_a">
        <view class="chart_b">
          <view class="chart_n">
            <view class="chart_ab">
              PM2.5
            </view>
          </view>
          <view class="chart_n">
            <view class="chart_bb">
              10
            </view>
          </view>
          <view class="chart_n">
            <view class="chart_ab">
              PM10
            </view>
          </view>
          <view class="chart_n">
            <view class="chart_bb">
              89
            </view>
          </view>
          <view class="chart_n">
            <view class="chart_ab">
              O3
            </view>
          </view>
          <view class="chart_n">
            <view class="chart_bb">
              160
            </view>
          </view>
        </view>
        <view class="chart_d">
          <view class="chart_n">
            <view class="chart_ab ">
              CO2
            </view>
          </view>
          <view class="chart_n">
            <view class="chart_bb chart_ca">
              8
            </view>
          </view>
          <view class="chart_n">
            <view class="chart_ab">
              CO
            </view>
          </view>
          <view class="chart_n">
            <view class="chart_bb chart_cb">
              0.8
            </view>
          </view>
          <view class="chart_n">
            <view class="chart_ab">
              NO3
            </view>
          </view>
          <view class="chart_n">
            <view class="chart_bb">
              12
            </view>
          </view>
        </view>
        <view class="chart_u">
          *单位：µg/m³(CO为mg/m³)
        </view>
      </view>
      <!-- 七日天气预报 -->
      <view class="weather">
        <view class="weather_a">
          七日天气预报
        </view>
        <scroll-view class="scroll-view_H" scroll-x="true">
          <view class="big_box">
            <view class="weather_box" v-for="item in 7">
              <view class="weather_word">
                21日（今天）
              </view>
              <view class="weather_img">
                <image src="../../static/home_page/xiaoyu.png" mode=""></image>
              </view>
              <view class="weather_img">
                <image src="../../static/home_page/xiaoyu.png" mode=""></image>
              </view>
              <view class="weather_word">
                小雨
              </view>
              <view class="weather_word">
                12/6℃
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
      <!-- 24小时空气质量变化趋势 -->
      <view class="change">
        <view class="change_head">
          24小时空气质量变化趋势
        </view>
        <view class="change_a">
          <view class="change_aa">
          </view>
          徽州区
        </view>
        <view class="region">
          <echarts :option="option" style="height: 300px;" @click="echartsClick"></echarts>
        </view>
      </view>
    </view>
    <view class="more">
      <view class="more_a" @click="show" v-if="flag==0">
        查看更多
      </view>
      <view class="more_a" @click="show_a" v-if="flag==1">
        收起
      </view>
      <view class="more_b" v-if="flag==0">
        <image src="../../static/home_page/xl.png" mode=""></image>
      </view>
      <view class="more_b" v-if="flag==1">
        <image src="../../static/home_page/sl.png" mode=""></image>
      </view>
    </view>
    <view class="enterprise">
      <view class="enterprise_title">
        <view class="title_frist">
          徽州区大气精细化监管企业
        </view>
        <navigator class="title_two" url="/pages/all_enterprises/all_enterprises">
          <view class="title_four">
            查看全部
          </view>
          <view class="title_three">
            <image src="../../static/home_page/gengduo.png" mode=""></image>
          </view>
        </navigator>
      </view>
      <view class="enterprise_circular">
        <view class="circular_frist">
          <view class="circular_conter">
            <view class="conter_frist">
              1234
            </view>
            <view class="conter_two">
              正常
            </view>
          </view>
          <image src="../../static/home_page/zc.png" mode=""></image>
        </view>
        <view class="circular_two">
          <view class="circular_conter">
            <view class="conter_frist">
              323
            </view>
            <view class="conter_two">
              异常
            </view>
          </view>
          <image src="../../static/home_page/yc.png" mode=""></image>
        </view>
        <view class="circular_three">
          <view class="circular_conter">
            <view class="conter_frist">
              23
            </view>
            <view class="conter_two">
              离线
            </view>
          </view>
          <image src="../../static/home_page/xl(1).png" mode=""></image>
        </view>
      </view>
      <view class="ranking">
        企业污染实时排名
      </view>
      <view class="ranking_frist">
        <view class="ranking_two ranking_word">
          排名
        </view>
        <view class="ranking_three ranking_word">
          企业名称
        </view>
        <view class="ranking_four ranking_word">
          <view class="word_a">
            厂界
          </view>
          <image src="../../static/home_page/shangla.png" mode=""></image>
        </view>
        <view class="ranking_five ranking_word">
          <view class="word_a">
            排口
          </view>
          <image src="../../static/home_page/xia.png" mode=""></image>
        </view>

        <view class="ranking_seven ranking_word">
          状态
        </view>
      </view>
      <view class="ranking_number">
        <view class="number_a number_style">
          1
        </view>
        <view class="number_b number_style">
          永利
        </view>
        <view class="number_c number_style">
          35
          <view class="number_cd">
            mg/m³
          </view>
        </view>
        <view class="number_d number_style">
          35
          <view class="number_cd">
            mg/m³
          </view>
        </view>
        <view class="number_f">
          正常
        </view>
      </view>
      <view class="ranking_number">
        <view class="number_a number_style">
          1
        </view>
        <view class="number_b number_style">
          永利
        </view>
        <view class="number_c number_style">
          35
          <view class="number_cd">
            mg/m³
          </view>
        </view>
        <view class="number_d number_style">
          35
          <view class="number_cd">
            mg/m³
          </view>
        </view>
        <view class="number_f">
          正常
        </view>
      </view>
      <view class="ranking_number">
        <view class="number_a number_style">
          1
        </view>
        <view class="number_b number_style">
          永利
        </view>
        <view class="number_c number_style">
          35
          <view class="number_cd">
            mg/m³
          </view>
        </view>
        <view class="number_d number_style">
          35
          <view class="number_cd">
            mg/m³
          </view>
        </view>
        <view class="number_f">
          正常
        </view>
      </view>
      <view class="ranking_number">
        <view class="number_a number_style">
          1
        </view>
        <view class="number_b number_style">
          永利
        </view>
        <view class="number_c number_style">
          35
          <view class="number_cd">
            mg/m³
          </view>
        </view>
        <view class="number_d number_style">
          35
          <view class="number_cd">
            mg/m³
          </view>
        </view>
        <view class="number_f">
          正常
        </view>
      </view>
      <view class="ranking_number">
        <view class="number_a number_style">
          1
        </view>
        <view class="number_b number_style">
          永利
        </view>
        <view class="number_c number_style">
          35
          <view class="number_cd">
            mg/m³
          </view>
        </view>
        <view class="number_d number_style">
          35
          <view class="number_cd">
            mg/m³
          </view>
        </view>
        <view class="number_f">
          正常
        </view>
      </view>
      <view class="ranking_number">
        <view class="number_a number_style">
          1
        </view>
        <view class="number_b number_style">
          永利
        </view>
        <view class="number_c number_style">
          35
          <view class="number_cd">
            mg/m³
          </view>
        </view>
        <view class="number_d number_style">
          35
          <view class="number_cd">
            mg/m³
          </view>
        </view>
        <view class="number_f">
          正常
        </view>
      </view>
      <view class="ranking_number">
        <view class="number_a number_style">
          1
        </view>
        <view class="number_b number_style">
          永利
        </view>
        <view class="number_c number_style">
          35
          <view class="number_cd">
            mg/m³
          </view>
        </view>
        <view class="number_d number_style">
          35
          <view class="number_cd">
            mg/m³
          </view>
        </view>
        <view class="number_f">
          正常
        </view>
      </view>
      <view class="ranking_number">
        <view class="number_a number_style">
          1
        </view>
        <view class="number_b number_style">
          永利
        </view>
        <view class="number_c number_style">
          35
          <view class="number_cd">
            mg/m³
          </view>
        </view>
        <view class="number_d number_style">
          35
          <view class="number_cd">
            mg/m³
          </view>
        </view>
        <view class="number_f">
          正常
        </view>
      </view>
    </view>
    <view class="foot">
    </view>
  </view>
</template>

<script>
  import echarts from '@/components/echarts/echarts.vue';
  export default {
    data() {
      return {
        flag: 1,
        option: {
          xAxis: {
            type: 'category',
            data: ['6:00', '8:00', '10:00', '12:00', '14:00', '16:00']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [760, 350, 200, 100, 198, 420],
            type: 'line',
            smooth: true,
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#5B8FF9' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#FFFFFF' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#5B8FF9' // 0% 处的颜色
                }, {
                  offset: 0.5,
                  color: '#5B8FF9' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#5B8FF9' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            areaStyle: {}
          }]
        },

      }
    },

    methods: {
      /**
       * 点击事件
       * @param {Object} params
       */
      echartsClick(params) {
        console.log('点击数据', params)
      },
      show() {
        this.flag = 1
      },
      show_a() {
        this.flag = 0
      },
    }
  }
</script>

<style lang="scss">
  .qiun-charts {
    width: 650upx;
    height: 500upx;
    background-color: #FFFFFF;
  }

  .charts {
    width: 650upx;
    height: 500upx;
    background-color: #FFFFFF;
  }

  .change_chart {
    // width: 702rpx;
    // height: 550rpx;
    background-color: #fff;
    margin: 20rpx auto 0;
  }

  .conter {
    padding-top: calc(var(--status-bar-height));
    background-color: #0BADFA;

    .box {
      width: 696rpx;
      margin: 22rpx auto 0;
      background-color: #FFFFFF;
      border-radius: 12rpx 12rpx 0px 0px;
    }

    .icon {
      margin-left: 15rpx;
    }

    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title_word {
        font-size: 28rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        margin: 29rpx 0 0 23rpx;
      }

      .title_time {
        font-size: 24rpx;
        font-family: PingFang-SC-Medium, PingFang-SC;
        font-weight: 500;
        color: #333333;
        margin: 37rpx 21rpx 0 0;
      }
    }

    .contaminated {
      display: flex;
      align-items: center;
      width: 696rpx;
      height: 250rpx;
      border-bottom: 1rpx solid #F2F2F2;

      overflow: hidden;


      .circular {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 152rpx;
        height: 152rpx;
        font-size: 44rpx;
        font-family: PingFang-SC-Heavy, PingFang-SC;
        font-weight: 800;
        color: #FF6010;
        margin: 0 0 0 47rpx;
        box-shadow: 0px 0px 14px 0px rgba(157, 63, 15, 0.2);
        border: 12rpx solid #FF6010;
        border-radius: 50%;
      }

      .light {
        margin-left: 56rpx;
      }

      .light_top {
        font-size: 48rpx;
        font-family: PingFang-SC-Medium, PingFang-SC;
        font-weight: 500;
        color: #333333;
        margin-bottom: 22rpx;
      }

      .light_bottom {
        font-size: 24rpx;
        font-family: PingFang-SC-Medium, PingFang-SC;
        font-weight: 500;
        color: #999999;
      }

      .contaminated_icon {
        width: 24rpx;
        height: 24rpx;
      }

      .contaminated_icon {
        margin: 0 8rpx 67rpx 0;
        width: 24rpx;
        height: 24rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .contaminated_right {
        margin-bottom: 50rpx;
        font-size: 28rpx;
        font-family: PingFang-SC-Medium, PingFang-SC;
        font-weight: 500;
        color: #0FAEF6;
      }
    }

    .chart {
      width: 696rpx;
      // height: 417rpx;
      background: #FFFFFF;
      margin: 0 auto;
      // display: none;

      .chart_number {
        display: flex;
        align-items: center;
        height: 109rpx;
        border-bottom: 1rpx solid #F2F2F2;
      }

      .chart_frist {
        width: 129rpx;
      }

      .chart_two {
        width: 142rpx;
      }

      .chart_three {
        width: 156rpx;
      }

      .chart_four {
        width: 119rpx;
      }

      .chart_five {
        width: 146rpx;
      }

      .chart_border {
        height: 51rpx;
        border-left: 1px solid #F2F2F2;
      }

      .temperature {
        font-size: 26rpx;
        font-family: PingFang-SC-Medium, PingFang-SC;
        font-weight: 500;
        color: #333333;
        display: flex;

        image {
          margin: 6rpx 6rpx 0 16rpx;
          width: 24rpx;
          height: 24rpx;
        }
      }

      .humidity {
        font-size: 26rpx;
        font-family: PingFang-SC-Medium, PingFang-SC;
        font-weight: 500;
        color: #333333;
        display: flex;

        image {
          margin: 6rpx 6rpx 0 16rpx;
          width: 24rpx;
          height: 24rpx;
        }
      }

      .wind_speed {
        font-size: 26rpx;
        font-family: PingFang-SC-Medium, PingFang-SC;
        font-weight: 500;
        color: #333333;
        display: flex;

        image {
          margin: 6rpx 6rpx 0 16rpx;
          width: 24rpx;
          height: 24rpx;
        }
      }

      .wind_direction {
        font-size: 26rpx;
        font-family: PingFang-SC-Medium, PingFang-SC;
        font-weight: 500;
        color: #333333;
        display: flex;

        image {
          margin: 6rpx 6rpx 0 16rpx;
          width: 24rpx;
          height: 24rpx;
        }
      }

      .pressure {
        font-size: 26rpx;
        font-family: PingFang-SC-Medium, PingFang-SC;
        font-weight: 500;
        color: #333333;
        display: flex;

        image {
          margin: 6rpx 6rpx 0 16rpx;
          width: 24rpx;
          height: 24rpx;
        }
      }

      .frist_number {
        text-align: center;
        font-size: 24rpx;
        font-family: PingFang-SC-Medium, PingFang-SC;
        font-weight: 500;
        color: #333333;
      }

      // .frist_number_a {
      //   margin-top: 15rpx;
      // }

      .chart_a {
        // height: 224rpx;
        border-bottom: 1rpx solid #F2F2F2;
      }

      .chart_b {
        margin: 36rpx 0 55rpx 27rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .chart_n {
        width: 16.5%;
      }

      .chart_d {
        margin-left: 27rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .chart_ab {
        font-size: 24rpx;
        font-family: PingFang-SC-Medium, PingFang-SC;
        font-weight: 500;
        color: #333333;
      }

      .chart_bb {
        width: 44rpx;
        height: 44rpx;
        line-height: 44rpx;
        font-size: 24rpx;
        text-align: center;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        background: #3EE27A;
        border-radius: 12rpx;
      }

      .chart_n .chart_ca {
        background: #FF6010;
      }

      .chart_n .chart_cb {
        background: #FF3B30;
      }

      .chart_u {
        text-align: center;
        margin: 32rpx 0 20rpx;
        font-size: 20rpx;
        font-family: PingFang-SC-Medium, PingFang-SC;
        font-weight: 500;
        color: #999999;
      }


    }

    .enterprise {
      width: 696rpx;
      height: 1170rpx;
      margin: 22rpx auto;
      background-color: #FFFFFF;
      border-radius: 12rpx;
    }

    .enterprise_title {
      display: flex;
      justify-content: space-between;
    }

    .title_frist {
      font-size: 28rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 700;
      color: #333333;
      margin: 20rpx 0 0 20rpx;
    }

    .title_two {
      display: flex;
      margin: 20rpx 20rpx 0 0;
    }

    .title_four {
      font-size: 24rpx;
      font-family: PingFang-SC-Medium, PingFang-SC;
      font-weight: 500;
      color: #1DB0FA;
    }

    .title_three {
      margin: -11rpx 0 0 10rpx;
      width: 13rpx;
      height: 13rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .enterprise_circular {
      display: flex;
      justify-content: space-around;
      margin-top: 31rpx;
    }

    .circular_frist {
      position: relative;
      width: 170rpx;
      height: 170rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .circular_two {
      position: relative;
      width: 170rpx;
      height: 170rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .circular_three {
      position: relative;
      width: 170rpx;
      height: 170rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .circular_conter {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 999;
    }

    .conter_frist {
      font-size: 44rpx;
      font-family: PingFang-SC-Heavy, PingFang-SC;
      font-weight: 800;
      color: #FFFFFF;
    }

    .conter_two {
      text-align: center;
      font-size: 24rpx;
      font-family: PingFang-SC-Medium, PingFang-SC;
      font-weight: 500;
      color: #FFFFFF;
    }

    .ranking {
      margin: 44rpx 0 0 22rpx;
      font-size: 28rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 700;
      color: #333333;
    }


    .ranking_frist {
      margin: 10rpx auto;
      width: 656rpx;
      height: 44rpx;
      background: #F2F2F2;
      display: flex;
      align-items: center;
    }

    .ranking_two {
      margin: 0 45rpx;
    }

    .ranking_three {
      margin-right: 79rpx;
    }

    .word_a {
      margin-right: 11rpx;
    }

    .ranking_four {
      display: flex;
      align-items: center;
      margin-right: 78rpx;

      image {
        width: 11rpx;
        height: 20rpx;
      }
    }

    .ranking_five {
      display: flex;
      align-items: center;
      margin-right: 57rpx;

      image {
        width: 11rpx;
        height: 20rpx;
      }
    }

    .ranking_seven {
      margin-right: 30rpx;
    }

    .ranking_word {
      font-size: 24rpx;
      font-family: PingFang-SC-Medium, PingFang-SC;
      font-weight: 500;
      color: #999999;
    }


    .ranking_number {
      display: flex;
      align-items: center;
      height: 95rpx;
    }

    .number_style {
      font-size: 24rpx;
      font-family: PingFang-SC-Medium, PingFang-SC;
      font-weight: 500;
      color: #333333;
    }

    .number_a {
      margin: 0 90rpx 0 75rpx;
    }

    .number_b {
      margin-right: 93rpx;
    }

    .number_cd {
      font-size: 18rpx;
      font-family: PingFang-SC-Medium, PingFang-SC;
      font-weight: 500;
      color: #999999;
      margin: 6rpx 0 0 6rpx;
    }

    .number_c {
      display: flex;
      margin: 0 52rpx 0 10rpx;
    }

    .number_d {
      display: flex;
      margin-right: 44rpx;
    }

    .number_e {
      display: flex;
      width: 114rpx;
      margin: 0 47rpx 0 5rpx;
    }

    .number_ee {
      text-align: center;
      width: 30rpx;
      height: 32rpx;
      font-size: 24rpx;
      font-family: PingFang-SC-Medium, PingFang-SC;
      font-weight: 500;
      color: #FFFFFF;
      background: #3792FF;
      border-radius: 6rpx;
      margin-right: 12rpx;
    }

    .number_f {
      font-size: 24rpx;
      font-family: PingFang-SC-Medium, PingFang-SC;
      font-weight: 500;
      color: #3792FF;
      margin-right: 27rpx;
    }
  }

  .weather {
    width: 680rpx;
  }

  .weather_a {
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    margin: 20rpx 0 0 19rpx;
  }

  .big_box {
    width: 1000rpx;
    display: flex;
    margin: 20rpx 26rpx 0 16rpx;
  }

  .weather_box {
    // overflow: hidden;
    width: 146rpx;
    height: 270rpx;
    background: linear-gradient(180deg, #18B2F0 0%, #9FE2FF 100%);
    // border-radius: 8rpx 0rpx 0rpx 8rpx;
    margin-right: 1rpx;
  }

  .weather_box:first-child {
    border-radius: 8rpx 0rpx 0rpx 8rpx;
  }

  .weather_box:last-child {
    border-radius: 0rpx 8rpx 8rpx 0rpx;
  }

  .weather_word {
    text-align: center;
    font-size: 20rpx;
    margin-top: 15rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #FFFFFF;
  }

  .weather_img {
    text-align: center;
    margin-top: 15rpx;

    image {
      width: 34rpx;
      height: 34rpx;
    }
  }

  .change {
    margin: 40rpx 0 0 20rpx;
  }

  .change_head {
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
  }

  .change_a {
    display: flex;
    align-items: center;
    margin: 34rpx 0 0 30rpx;
    font-size: 22rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #8C8C8C;
  }

  .change_aa {
    width: 15rpx;
    height: 15rpx;
    margin-right: 16rpx;
    background-color: #5B8FF9;
    border-radius: 50%;
  }
 .region{
    transform: translateY(-10%);
  }
  .more {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 696rpx;
    height: 71rpx;
    background-color: #FFFFFF;
    border-radius: 0px 0px 12rpx 12rpx;
    border-top: 1px solid #F2F2F2;
  }

  .more_a {
    text-align: center;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #999999;
  }

  .more_b {
    margin: 0 0 30rpx 10rpx;
    width: 18rpx;
    height: 18rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .foot {
    height: 20rpx;
  }
</style>
